$login-box-bg: #de2728;
$login-box-bg2: #fff;
$login-box-border-color: #C53535;
$login-box-color: #303133;
$login-box-color2: #ABB7C7;
$login-box-color3: #FFA25B;
$login-box-color4: #F5F5F5;
.auth-login-box{
    width: 100%;
    height: 100%;
    min-height: 780px;
    padding: .4rem 0 .2rem;
    // background-image: radial-gradient(circle at -3.1% -4.3%, rgb(57, 255, 186) 0%, rgb(21, 38, 82) 90%);
    // background-image: radial-gradient(circle at -4% -12.9%, rgb(74, 98, 110) 0.3%, rgb(30, 33, 48) 90.2%);
    background: url("~@/assets/new_login_bg.png") no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    overflow: hidden;
    .footer-info__text{
        font-size: 14px;
        font-weight: 300;
        color: #F5F5F5;
        line-height: 1;
        padding-bottom: 39px;
    }
    .auth-login__body{
        width: 100%;
        @include flexLayout(flex,center,center);
        position: relative;
        margin-top: 60px;
    }
    .auth-login__form-box{
        width: 4rem;
        margin: 0 auto;
        padding: .16rem 0 0;
        .auth-login__form-title{
            color: $login-box-color4;
            font-size: .32rem;
            padding: .36rem 0 .26rem;
        }
        .cf__group{
            padding: .1rem 0;
        }
        .cf__group-info-icon{
            width: .64rem;
            height: 100%;
            font-size: .2rem;
            color: $login-box-border-color;
            @include flexLayout(flex,center,center);
            .icon-svg{
                font: inherit;
                color: inherit;
            }
        }
        .auth-login__form-btn{
            border-radius: .25rem;
            width: 100%;
            background: $login-box-bg;
            border-color: $login-box-bg;
            font-size: .18rem;
            margin-top: 0.05rem;
            &.cancel{
                background: transparent;
                border-color: transparent;
                color: $login-box-bg2;
            }
        }
        .captcha-box{
            width: 1.4rem;
            min-width: 140px;
            border-radius: .04rem;
            overflow: hidden;
            cursor: pointer;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .auth-login__form-btn-text.el-button{
            height: auto;
            padding: 0;
            color: $login-box-bg;
            font-size: .16rem;
            text-align: right;
            border: none;
            background: transparent;
            &.is-disabled,
            &.is-disabled:hover,
            &.is-disabled:focus{
                color: rgba($login-box-bg,.6);
            }
        }
        ::v-deep{
            .transparent-form .cf__group .el-input--medium .el-input__inner{
                border-radius: .25rem;
                font-size: .18rem;
                background-color: $login-box-bg2;
                color: $login-box-color;
                @include inputPlaceholder($login-box-color2);
            }
        }
    }

    .wechat-login-box{
        line-height: 1;
        text-align: center;
        z-index: 20;
        margin-top: 50px;
        &>p{
            font-size: 14px;
            font-weight: 500;
            color: #666666;
            height: 20px;
            line-height: 20px;
            margin: 0 0 20px 0;
            position: relative;
            &::before{
                content: '';
                display: block;
                width: 145px;
                height: 1px;
                background: #999999;
                position: absolute;
                left: 70px;
                top: 10px;
            }
            &::after{
                content: '';
                display: block;
                width: 145px;
                height: 1px;
                background: #999999;
                position: absolute;
                right: 70px;
                top: 10px;
            }
        }
        img{
            width: 55px
        }
        img:nth-child(1){
            display: inline-block;
        }
        img:nth-child(2){
            display: none;
        }
        div{
            margin: 0 auto;
            width: 56px;
            p{
                font-size: 14px;
                font-weight: 500;
                color: #666666;
                line-height: 1;
                margin: 8px 0 0 0;
            }
        }
        &>div:hover{
            cursor: pointer;
            img:nth-child(1){
                display: none;
            }
            img:nth-child(2){
                display: inline-block;
            }
        }
    }
}
.tzy-login-box{
    width: 100%;
    height: 100%;
    min-height: 500px;
    padding: .4rem 0;
    // background-image: radial-gradient(circle at -3.1% -4.3%, rgb(57, 255, 186) 0%, rgb(21, 38, 82) 90%);
    // background-image: radial-gradient(circle at -4% -12.9%, rgb(74, 98, 110) 0.3%, rgb(30, 33, 48) 90.2%);
    background: url("~@/assets/login_bg.jpg") no-repeat, rgba(55,56,58,1);
    background-size: cover;
    background-attachment: fixed;
    @include flexLayout(flex,center,center);
    position: relative;
    .tzy-lb__form-logo{
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 20;
        width: .7rem;
        height: .7rem;
        transform: translate(-50%,-3rem);
        opacity: 0;
        transition-duration: $default-transition-duration;
        transition-timing-function: $default-transition-timing;
        transition-property: opacity, transform;
        img{
            display: inline-block;
            border-radius: 100%;
            overflow: hidden;
        }
        .tzy-lb__form-logo-line-right,
        .tzy-lb__form-logo-line-left{
            width: .9rem;
            height: .01rem;
            background-color: $login-box-border-color;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(-155%,-50%);
            z-index: 2;
            opacity: 0;
            transition-duration: $default-transition-duration;
            transition-timing-function: $default-transition-timing;
            transition-property: opacity,transform;
            &::after{
                content: "";
                display: block;
                width: .04rem;
                height: .04rem;
                border-radius: 100%;
                background-color: $login-box-border-color;
                position: absolute;
                top: 50%;
                transform: translate(.04rem,-60%);
                right: 0;
            }
        }
        .tzy-lb__form-logo-line-right{
            left: auto;
            right: 0;
            transform: translate(155%,-50%);
            &::after{
                right: auto;
                left: 0;
                transform: translate(-.04rem,-60%);
            }
        }
    }
    .tzy-lb__box{
        width: 4.4rem;
        height: 3.2rem;
        background-color: map-get($login-bg,300);
        border-radius: .06rem;
        overflow: hidden;
        padding: .12rem .14rem;
        // box-shadow: 0 .02rem .12rem rgba($login-shadow, .5);
        opacity: 0;
        transition-duration: $default-transition-duration;
        transition-timing-function: $default-transition-timing;
        transition-property: opacity;
        position: relative;
    }
    .cf__group-info-icon{
        width: .44rem;
        height: 100%;
        font-size: .2rem;
        color: $login-box-border-color;
        @include flexLayout(flex,center,center);
        .icon-svg{
            font: inherit;
            color: inherit;
        }
        &.user{
            background: url("~@/assets/login_user.png") no-repeat, transparent;
            background-size: auto 50%;
            background-position: right center;
        }
        &.pass{
            background: url("~@/assets/login_pass.png") no-repeat, transparent;
            background-size: auto 50%;
            background-position: right center;
        }
    }
    .tzy-lb__title{
        color: $primary--color-0-1;
        font-size: .24rem;
        white-space: nowrap;
        text-align: center;
        padding: .14rem 0;
        opacity: 0;
        transform: translateY(-.2rem);
        transition-duration: $default-transition-duration;
        transition-timing-function: $default-transition-timing;
        transition-property: transform, opacity;
    }
    .tzy-lb__form{
        opacity: 0;
        transform: translateY(.2rem);
        transition-duration: $default-transition-duration;
        transition-timing-function: $default-transition-timing;
        transition-property: transform, opacity;
        .tzy-lb__form-box{
            padding: .12rem .14rem;
        }
        .captcha-box{
            width: 1.4rem;
            height: .4rem;
            margin-left: .2rem;
            min-width: 140px;
            min-height: 40px;
            border-radius: .04rem;
            overflow: hidden;
            cursor: pointer;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .tzy-lb__form-btn{
            width: 100%;
            background: $login-box-bg;
            border-color: $login-box-bg;
        }
    }
    &.enter{
        .tzy-lb__form-logo{
            transition-delay: 100ms;
            transform: translate(-50%,-2.6rem);
            opacity: 1;
            .tzy-lb__form-logo-line-right{
                transition-delay: 500ms;
                opacity: 1;
                transform: translate(115%,-50%);
            }
            .tzy-lb__form-logo-line-left{
                transition-delay: 500ms;
                opacity: 1;
                transform: translate(-115%,-50%);
            }
        }

        .tzy-lb__box{
            opacity: 1;
        }
        .tzy-lb__title,
        .tzy-lb__form{
            transition-delay: 200ms;
            opacity: 1;
            transform: translateY(0);
        }
    }
}
